<template>
  <div class="pad-20 bgc-default">
    <div class="pad-20 bg-color-white">
      <div>
        <label class="font-14 pad-l-5">加入供货联盟状态：</label>
        <el-radio-group v-model="isSubmitClick" @change="isSubmitAction">
          <el-radio-button label="0">未提交</el-radio-button>
          <el-radio-button label="1">已提交</el-radio-button>
        </el-radio-group>
        <label class="font-14 pad-l-5">（商品提交至供货联盟，并且上架后在供货联盟中可见）</label>
      </div>
      <!--顶部搜索 -->
      <div class="top-operate-default flex-col mar-t-20 mar-b-10" style="align-items: baseline; height: 100%; ">
        <div class="search-item mar-t-20">
          <el-select v-model="searchListQuery.searchKeyWordType" style="width: 120px;">
            <el-option label="商品名称" value="1"></el-option>
            <el-option label="商品货号" value="2"></el-option>
            <el-option label="商品条码" value="3"></el-option>
          </el-select>
          <el-input v-model="searchListQuery.searchKeyWord" @keyup.enter.native="handleSearch" placeholder="请输入搜索内容"
            clearable size="small" style="width: 240px" />
          <el-select v-model="searchListQuery.goodsStatus" class="special-input mar-l-20" placeholder="选择上下架状态"
            v-if="isSubmitClick === '0'">
            <el-option v-for="item in goodsStatusOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="searchListQuery.supplyAllianceStatus" class="special-input mar-l-20" placeholder="供货联盟状态"
            v-if="isSubmitClick === '1'">
            <el-option label='全部' value=""></el-option>
            <el-option label='已上架' value="1"></el-option>
            <el-option label='已下架' value="2"></el-option>
          </el-select>
          <el-select v-model="searchListQuery.supplyAllianceSellPriceType" class="special-input mar-l-20"
            placeholder="选择零售价模式">
            <el-option v-for="item in supplyAllianceSellPriceTypeList" :key="item.value" :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="searchListQuery.supplyAllianceWholesalePriceType" class="special-input mar-l-20"
            placeholder="选择批发价模式">
            <el-option v-for="item in supplyAllianceWholesalePriceTypeList" :key="item.value" :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="search-item mar-t-20 mar-b-10">
          <label class="font-14">选择商品分类：</label>
          <el-cascader v-model="categoryIds" :props="{ checkStrictly: true }" change-on-select placeholder="选择商品分类"
            :options="categoryData" class="special-input" clearable></el-cascader>
          <el-button-group class="mar-l-20">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button plain @click="resetSearch">重置</el-button>
          </el-button-group>
        </div>
      </div>
      <el-button v-if="isSubmitClick === '0'" class="batch-btn" @click="batchAddSupplyAlliance" type="primary">批量加入供货联盟
      </el-button>
      <el-button v-if="isSubmitClick === '1'" class="batch-btn" @click="batchAddSupplyAlliance" type="primary">批量移除供货联盟
      </el-button>
      <!-- 内容列表 -->
      <div class="table-container">
        <el-table ref="multipleTable" :data="goodsList" @selection-change="handleSelectionChange"
          v-loading="listLoading" element-loading-text="加载中" style="width: 100%" header-cell-class-name="default-header"
          row-class-name="default-row">
          <el-table-column width="50px" type="selection" fixed="left"></el-table-column>
          <el-table-column width="320px" label="商品" fixed="left">
            <template slot-scope="scope">
              <div class="flex v-align-c cursor-p mar-r-30">
                <label><img :src="scope.row.mainImage" class="user-avatar cursor-p"></label>
                <div class="font-14 pad-l-10 v-align-h height-65">
                  <div class="goods-title">
                    <div class="line-2">
                      <template v-if="scope.row.categoryName">
                        <el-tag size="mini" v-if="scope.row.skuFlag == 1" type="danger" effect="light">多</el-tag>
                      </template>
                      <template v-if="scope.row.crossBorderType === 2">
                        <el-tag size="mini" type="danger" effect="light">保</el-tag>
                      </template>
                      <template
                        v-if="enterpriseConfig.anchorSelectionAuthority == '1' && scope.row.selectionGoodsType == '1'">
                        <el-tag size="mini" class="anchor-tag" type="danger" effect="light">选</el-tag>
                      </template>
                      {{scope.row.title}}
                    </div>
                  </div>
                  <template v-if="scope.row.categoryName">
                    <span class="font-color-6 font-13">[{{scope.row.categoryName}}]</span>
                  </template>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column v-if="getVersionType() != 3" label="联盟供货价">
            <template slot-scope="scope">
              <span v-if="scope.row.supplyAlliancePrice">
                <span v-if="scope.row.skuFlag === 0"> ￥{{scope.row.supplyAlliancePrice}} </span>
                <span v-else>
                  <span v-if="scope.row.supplyAlliancePrice  === scope.row.supplyAllianceMaxPrice">
                    ￥{{scope.row.supplyAlliancePrice}} </span>
                  <span v-else>
                    ￥{{scope.row.supplyAlliancePrice}}--{{scope.row.supplyAllianceMaxPrice}}
                  </span>
                </span>
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column v-if="getVersionType() != 3" label="零售价模式">
            <template slot-scope="scope">
              <div v-if="scope.row.supplyAllianceSellPriceTypeName">
                <span>{{scope.row.supplyAllianceSellPriceTypeName}}</span>
              </div>
              <div v-else>
                <span>未设置</span>
              </div>
              <span v-if="scope.row.supplyAllianceSellMinPrice">
                <span v-if="scope.row.supplyAllianceSellMinPrice  === scope.row.supplyAllianceSellMaxPrice">
                  ￥{{scope.row.supplyAllianceSellMinPrice}}
                </span>
                <span v-else>
                  <span v-if="scope.row.supplyAllianceSellMaxPrice !== null">
                    ￥{{scope.row.supplyAllianceSellMinPrice}}--{{scope.row.supplyAllianceSellMaxPrice}}
                  </span>
                </span>
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column v-if="getVersionType() != 3" align="center" label="建议批发价">
            <template slot-scope="scope">
              <div v-if="scope.row.supplyAllianceIsEnableWholesaleModel === 1">
                <div v-if="scope.row.supplyAllianceWholesalePriceTypeName">
                  <span>{{scope.row.supplyAllianceWholesalePriceTypeName}}</span>
                </div>
                <div v-else>
                  <span>未设置</span>
                </div>
                <span v-if="scope.row.supplyAllianceMinWholesalePrice">
                  <span v-if="scope.row.supplyAllianceMinWholesalePrice  === scope.row.supplyAllianceMaxWholesalePrice">
                    ￥{{scope.row.supplyAllianceMinWholesalePrice}}
                  </span>
                  <span v-else>
                    <span v-if="scope.row.supplyAllianceMaxWholesalePrice !== null">
                      ￥{{scope.row.supplyAllianceMinWholesalePrice}}--{{scope.row.supplyAllianceMaxWholesalePrice}}
                    </span>
                  </span>
                </span>
                <span v-else>--</span>
              </div>
              <div v-else>
                <span>未设置</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="库存/销量">
            <template slot-scope="scope">
              <span>{{scope.row.stock}}</span>
              <span>件/</span>
              <span> {{scope.row.salesNum}}</span>
              <span>件</span>
            </template>
          </el-table-column>
          <el-table-column v-if="isSubmitClick === '0'" label="上下架状态">
            <template slot-scope="scope">
              <template v-if="scope.row.stock == 0">
                已售空
              </template>
              <template v-else>
                <template v-if="scope.row.goodsStatusRemark">
                  <el-tooltip class="item" effect="dark" :content="scope.row.goodsStatusRemark" placement="top-start">
                    <span style="color: #2d8cf0">{{ dict.upDwonStatusFlag[scope.row.goodsStatus]}}</span>
                  </el-tooltip>
                </template>
                <template v-else>
                  {{ dict.upDwonStatusFlag[scope.row.goodsStatus]}}
                </template>
              </template>
            </template>
          </el-table-column>
          <el-table-column v-if="isSubmitClick === '1'" label="供货联盟状态">
            <template slot-scope="scope">
              <span v-if="scope.row.supplyAllianceStatus === 1">上架</span>
              <span v-if="scope.row.supplyAllianceStatus === 2">下架</span>
            </template>
          </el-table-column>
          <el-table-column min-width="160px" label="操作" fixed="right" align="right">
            <template slot-scope="scope">
              <template v-if="isSubmitClick !== '0' && scope.row.supplyAllianceStatus === 2">
                <el-button type="text" size="medium" @click="handleUp(scope.row)">上架</el-button>
              </template>
              <template v-if="isSubmitClick !== '0' && scope.row.supplyAllianceStatus === 1">
                <el-button type="text" size="medium" @click="handleDown(scope.row)">下架</el-button>
              </template>
              <el-button type="text" size="medium" @click="settingData(scope.row)">设置参数</el-button>
              <template v-if="isSubmitClick === '0'">
                <el-button type="text" size="medium" @click="addSupplyAlliance(scope.row)">加入供货联盟</el-button>
              </template>
              <template v-if="isSubmitClick === '1'">
                <el-button type="text" size="medium" @click="removeSupplyAlliance(scope.row)">移除供货联盟</el-button>
              </template>

            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <pagination v-show="total>0" :total="total" :page.sync="searchListQuery.currentPage"
        :limit.sync="searchListQuery.size" @pagination="initGoodsList" />
    </div>
    <!--新增-->
    <el-dialog :visible.sync="settingDataVisible" width="55%" :title="goodsEntity.title" @close='closeDialog'
      visible.loading="加载中..." :close-on-press-escape="false" class="mar-l-10">
      <el-form ref="goodsEntityForm" :model="goodsEntity" :rules="rules" label-position="right" label-width="120px">
        <el-form-item v-if="goodsEntity.skuFlag === 0" label="联盟供货价:" prop="supplyAlliancePrice">
          <el-input v-model="goodsEntity.supplyAlliancePrice" style="width: 90%"
            @keyup.native="goodsEntity.supplyAlliancePrice = checkInputNum(goodsEntity.supplyAlliancePrice)"
            :disabled="isViewOnly">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="零售价模式:" prop="supplyAllianceSellPriceType">
          <el-select style="width: 90%" v-model="goodsEntity.supplyAllianceSellPriceType" placeholder="请选择"
            @change="changeSellPriceType" :disabled="isViewOnly">
            <el-option v-for="item in supplyAllianceSellPriceTypeList" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="selectSellPriceTypeTitle" v-if="goodsEntity.skuFlag === 0">
          <el-input v-model="goodsEntity.supplyAllianceSellMinPrice"
            :class="goodsEntity.supplyAllianceSellPriceType === '1'?'w-195':'w-430'"
            @keyup.native="goodsEntity.supplyAllianceSellMinPrice = checkInputNum(goodsEntity.supplyAllianceSellMinPrice)"
            :disabled="isViewOnly">
            <template slot="append">元</template>
          </el-input>
          <template v-if="goodsEntity.supplyAllianceSellPriceType === '1'">
            <span>——</span>
            <el-input v-model="goodsEntity.supplyAllianceSellMaxPrice"
              :class="goodsEntity.supplyAllianceSellPriceType === '1'?'w-195':'w-430'"
              @keyup.native="goodsEntity.supplyAllianceSellMaxPrice = checkInputNum(goodsEntity.supplyAllianceSellMaxPrice)"
              :disabled="isViewOnly">
              <template slot="append">元</template>
            </el-input>
          </template>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="supplyIsEnableWholesaleModelFlag"
            :disabled="(goodsEntity.supplyAllianceIsEnableWholesaleModel === 1 && goodsEntity.supplyAllianceIsDisableIsEnableWholesaleModel === 1) || isViewOnly">
            启用批发价模式
          </el-checkbox>
        </el-form-item>
        <el-form-item label="批发价模式:" prop="supplyAllianceWholesalePriceType" v-if="supplyIsEnableWholesaleModelFlag">
          <el-select style="width: 90%" v-model="goodsEntity.supplyAllianceWholesalePriceType" placeholder="请选择"
            @change="changeWholesalePriceType" :disabled="isViewOnly">
            <el-option v-for="item in supplyAllianceWholesalePriceTypeList" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <template v-if="supplyIsEnableWholesaleModelFlag && goodsEntity.skuFlag === 0">
          <el-form-item :label="selectWholesalePriceTypeTitle">
            <el-input v-model="goodsEntity.supplyAllianceMinWholesalePrice"
              :class="goodsEntity.supplyAllianceWholesalePriceType === '1'?'w-195':'w-430'"
              @keyup.native="goodsEntity.supplyAllianceMinWholesalePrice = checkInputNum(goodsEntity.supplyAllianceMinWholesalePrice)"
              :disabled="isViewOnly">
              <template slot="append">元</template>
            </el-input>
            <template v-if="goodsEntity.supplyAllianceWholesalePriceType === '1'">
              <span>——</span>
              <el-input v-model="goodsEntity.supplyAllianceMaxWholesalePrice"
                :class="goodsEntity.supplyAllianceWholesalePriceType === '1'?'w-195':'w-430'"
                @keyup.native="goodsEntity.supplyAllianceMaxWholesalePrice = checkInputNum(goodsEntity.supplyAllianceMaxWholesalePrice)"
                :disabled="isViewOnly">
                <template slot="append">元</template>
              </el-input>
            </template>
          </el-form-item>
        </template>
        <el-form-item label="联盟运费:" prop="supplyAlliancePostFee">
          <el-input v-model="goodsEntity.supplyAlliancePostFee" style="width: 90%"
            @keyup.native="goodsEntity.supplyAlliancePostFee = checkInputNum(goodsEntity.supplyAlliancePostFee)"
            :disabled="isViewOnly">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item class=" mar-t-1" label="联盟商品分类:" prop="projectCategoryIds">
          <el-cascader v-model="goodsEntity.projectCategoryIds" :props="{ checkStrictly: true }" change-on-select
            placeholder="选择商品分类" :options="supplyAllianceCategoryData" class="special-input categoryWidth mar-t-1"
            clearable style="width: 90%" :disabled="isViewOnly"></el-cascader>
        </el-form-item>
        <el-form-item label="商品推介:" prop="supplyAllianceDescribe">
          <el-input style="width: 90%;" type="textarea" :rows="6" placeholder="请输入"
            v-model="goodsEntity.supplyAllianceDescribe" :disabled="isViewOnly"></el-input>
        </el-form-item>
        <el-form-item style="width:90%" v-if="goodsEntity.skuFlag === 1" label="SKU价格:">
          <el-table :data="goodsEntity.skuList" style="width: 100%">
            <el-table-column label="规格描述" prop="skuDetail"></el-table-column>
            <el-table-column align="center" width="120">
              <template slot="header" slot-scope="scope">
                <div v-if="!isViewOnly">
                  <el-popover placement="top" width="160" v-model="batchSetSupplyAlliancePriceVisable">
                    <label slot="reference" @click="showBatchSetSupplyAlliancePrice(1)">
                      <span>联盟供货价</span>
                      <i class="el-icon-circle-plus mar-l-10 font-blue" v-if="!isViewOnly"></i>
                    </label>
                    <div class="text-align-c pad-b-10">批量设置</div>
                    <el-form label-position="right" style="width: 100%">
                      <el-form-item>
                        <el-input v-model="batchSupplyAlliancePrice"
                          @keyup.native="batchSupplyAlliancePrice = checkInputNum(batchSupplyAlliancePrice)"
                          type="number"></el-input>
                      </el-form-item>
                    </el-form>
                    <div class="mar-t--10" style="text-align: right">
                      <el-button size="mini" type="text" @click="batchSetSupplyAlliancePriceVisable = false">取消
                      </el-button>
                      <el-button type="primary" size="mini" @click="batchSetPrice(1)">确定</el-button>
                    </div>
                  </el-popover>
                </div>
                <div v-else>
                  <span>联盟供货价</span>
                </div>
              </template>
              <template slot-scope="scope">
                <el-input v-model="scope.row.supplyAlliancePrice" style="width: 80px"
                  @keyup.native="scope.row.supplyAlliancePrice = checkInputNum(scope.row.supplyAlliancePrice)"
                  :disabled="isViewOnly">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column align="center">
              <template slot="header" slot-scope="scope">
                <div v-if="!isViewOnly">
                  <el-popover placement="top" width="160" v-model="batchSetSupplyAllianceSellPriceVisable">
                    <label slot="reference" @click="showBatchSetSupplyAlliancePrice(2)">
                      <span>{{selectSellPriceTypeTitle.replace(/：/g, '')}}</span>
                      <i class="el-icon-circle-plus mar-l-10 font-blue"></i>
                    </label>
                    <div class="text-align-c pad-b-10">批量设置</div>
                    <el-form label-position="right" style="width: 100%">
                      <el-form-item>
                        <el-input v-model="batchSupplyAllianceSellMinPrice" type="number"
                          @keyup.native="batchSupplyAllianceSellMinPrice = checkInputNum(batchSupplyAllianceSellMinPrice)">
                        </el-input>
                        <span v-if="goodsEntity.supplyAllianceSellPriceType === '1'">-</span>
                        <el-input v-model="batchSupplyAllianceSellMaxPrice"
                          v-if="goodsEntity.supplyAllianceSellPriceType === '1'" type="number"
                          @keyup.native="batchSupplyAllianceSellMaxPrice = checkInputNum(batchSupplyAllianceSellMaxPrice)">
                        </el-input>
                      </el-form-item>
                    </el-form>
                    <div class="mar-t--10" style="text-align: right">
                      <el-button size="mini" type="text" @click="batchSetSupplyAllianceSellPriceVisable = false">取消
                      </el-button>
                      <el-button type="primary" size="mini" @click="batchSetPrice(2)">确定</el-button>
                    </div>
                  </el-popover>
                </div>
                <div v-else>
                  <span>{{selectSellPriceTypeTitle.replace(/：/g, '')}}</span>
                </div>
              </template>
              <template slot-scope="scope">
                <el-input v-model="scope.row.supplyAllianceSellMinPrice" style="width: 80px"
                  @keyup.native="scope.row.supplyAllianceSellMinPrice = checkInputNum(scope.row.supplyAllianceSellMinPrice)"
                  :disabled="isViewOnly">
                </el-input>
                <template v-if="goodsEntity.supplyAllianceSellPriceType === '1'">
                  <span>-</span>
                  <el-input v-model="scope.row.supplyAllianceSellMaxPrice" style="width: 80px"
                    @keyup.native="scope.row.supplyAllianceSellMaxPrice = checkInputNum(scope.row.supplyAllianceSellMaxPrice)"
                    :disabled="isViewOnly">
                  </el-input>
                </template>
              </template>
            </el-table-column>
            <el-table-column align="center" v-if="supplyIsEnableWholesaleModelFlag">
              <template slot="header" slot-scope="scope">
                <div v-if="!isViewOnly">
                  <el-popover placement="top" width="160" v-model="batchSetSupplyAllianceWholesalePriceVisable"
                    v-if="!isViewOnly">
                    <label slot="reference" @click="showBatchSetSupplyAlliancePrice(3)">
                      <span>{{selectWholesalePriceTypeTitle.replace(/：/g, '')}}</span>
                      <i class="el-icon-circle-plus mar-l-10 font-blue"></i>
                    </label>
                    <div class="text-align-c pad-b-10">批量设置</div>
                    <el-form label-position="right" style="width: 100%">
                      <el-form-item>
                        <el-input v-model="batchSupplyWholesaleMinPrice" type="number"
                          @keyup.native="batchSupplyWholesaleMinPrice = checkInputNum(batchSupplyWholesaleMinPrice)">
                        </el-input>
                        <span v-if="goodsEntity.supplyAllianceWholesalePriceType === '1'">-</span>
                        <el-input v-model="batchSupplyWholesaleMaxPrice"
                          v-if="goodsEntity.supplyAllianceWholesalePriceType === '1'" type="number"
                          @keyup.native="batchSupplyWholesaleMaxPrice = checkInputNum(batchSupplyWholesaleMaxPrice)">
                        </el-input>
                      </el-form-item>
                    </el-form>
                    <div class="mar-t--10" style="text-align: right">
                      <el-button size="mini" type="text" @click="batchSetSupplyAllianceWholesalePriceVisable = false">取消
                      </el-button>
                      <el-button type="primary" size="mini" @click="batchSetPrice(3)">确定</el-button>
                    </div>
                  </el-popover>
                </div>
                <div v-else>
                  <span>{{selectWholesalePriceTypeTitle.replace(/：/g, '')}}</span>
                </div>
              </template>
              <template slot-scope="scope">
                <el-input v-model="scope.row.supplyAllianceMinWholesalePrice" style="width: 80px"
                  @keyup.native="scope.row.supplyAllianceMinWholesalePrice = checkInputNum(scope.row.supplyAllianceMinWholesalePrice)"
                  :disabled="isViewOnly">
                </el-input>
                <template v-if="goodsEntity.supplyAllianceWholesalePriceType === '1'">
                  <span>-</span>
                  <el-input v-model="scope.row.supplyAllianceMaxWholesalePrice" style="width: 80px"
                    @keyup.native="scope.row.supplyAllianceMaxWholesalePrice = checkInputNum(scope.row.supplyAllianceMaxWholesalePrice)"
                    :disabled="isViewOnly">
                  </el-input>
                </template>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveEntity" v-if="!isViewOnly">确认</el-button>
        <el-button @click="closeDialog">{{isViewOnly ? '关闭' : '取消'}}</el-button>
      </div>
    </el-dialog>
    <div>

    </div>
  </div>
</template>

<script>
  import {
    listGoodsCategory,
    operationSupplyAllianceGoods
  } from '@/api/goods/goods'
  import {
    listBrand
  } from '@/api/user/enterpriseBrand'
  import {
    getDictByGroupName
  } from '@/api/common/common'
  import goodsSelect from '../../components/goods-select'
  import elDragDialog from '@/directive/el-dragDialog'
  import {
    getToken
  } from '@/utils/auth'
  import {
    getByEnterpriseId
  } from '@/api/user/enterprise'
  import {
    pagingSupplyAllianceGoodsList,
    getSupplyAllianceGoodsInfo,
    saveSupplyAllianceGoodsData
  } from '@/api/goods/supplyAlliance'
  import {
    getProjectCategoryTree
  } from '@/api/project/projectGoodsCategory'
  export default {
    components: {
      goodsSelect
    },
    directives: {
      elDragDialog
    },
    data() {
      return {
        goodsStatusOptions: [{
          value: '',
          label: '全部'
        }, {
          value: '1',
          label: '已上架'
        }, {
          value: '0',
          label: '已下架'
        }],
        isSubmitClick: '0',
        settingDataVisible: false,
        supplyAllianceSellPriceTypeList: [{
          value: '1',
          label: '限定零售价范围'
        }, {
          value: '2',
          label: '限定零售价'
        }, {
          value: '3',
          label: '不限定零售价'
        }],
        supplyAllianceWholesalePriceTypeList: [{
          value: '1',
          label: '限定批发价范围'
        }, {
          value: '2',
          label: '限定批发价'
        }, {
          value: '3',
          label: '不限定批发价'
        }],
        selectSellPriceType: '1',
        selectWholesalePriceType: '1',
        selectSellPriceTypeTitle: '零售价范围',
        selectWholesalePriceTypeTitle: '批发价范围',
        total: 0,
        multipleSelection: [],
        listLoading: true,
        supplierList: [],
        listBrands: [],
        brandId: '',
        supplierType: '',
        searchListQuery: {
          supplierId: '',
          searchKeyWordType: '1',
          searchKeyWord: '',
          currentPage: 1,
          size: 10,
          distributionType: null,
          supplierType: null,
          selectionGoodsType: '',
          title: '',
          comboType: '1',
          supplyAllianceStatusList: '0',
          supplyAllianceSellPriceType: '',
          supplyAllianceWholesalePriceType: '',
          categoryId: ''
        },
        goodsEntity: {
          goodsId: '',
          title: '',
          supplyAlliancePrice: '',
          supplyAllianceSellPriceType: '',
          supplyAllianceSellMinPrice: '',
          supplyAllianceSellMaxPrice: '',
          supplyAllianceCategoryId: '',
          supplyAllianceDescribe: '',
          supplyAllianceUpdateType: '2',
          skuList: [],
          skuFlag: '',
          projectCategoryIds: [],
          supplyAllianceIsEnableWholesaleModel: 0,
          supplyAllianceWholesalePriceType: '1',
          supplyAllianceMinWholesalePrice: '',
          supplyAllianceMaxWholesalePrice: '',
          // 供货联盟运费
          supplyAlliancePostFee: ''
        },
        enterpriseConfig: {
          wholesaleAuthority: 0
        },
        supplierId: '',
        searchLabelType: '',
        dict: {
          upDwonStatusFlag: {}
        },
        isDict: false,
        projectCategoryIds: [],
        categoryIds: [],
        goodsList: [],
        // 供货联盟商品的所有分类json
        supplyAllianceCategoryData: [],
        // 当前企业商品的所有分类json
        categoryData: [],
        allChecked: false,
        uploadParams: '',
        rules: {
          supplyAlliancePrice: [{
            required: true,
            message: '请填写联盟供货价',
            trigger: 'blur'
          }],
          supplyAllianceSellPriceType: [{
            required: true,
            message: '请选择零售价模式',
            trigger: 'change'
          }],
          supplyAllianceWholesalePriceType: [{
            required: true,
            message: '请选择批发价模式',
            trigger: 'change'
          }],
          supplyAllianceDescribe: [{
            required: true,
            message: '请填写商品推介',
            trigger: 'blur'
          }],
          projectCategoryIds: [{
            required: true,
            message: '请选择商品分类',
            trigger: 'change'
          }]
        },
        batchSupplyAlliancePrice: '',
        batchSupplyAllianceSellMinPrice: '',
        batchSupplyAllianceSellMaxPrice: '',
        batchSetSupplyAlliancePriceVisable: false,
        batchSetSupplyAllianceSellPriceVisable: false,
        supplyIsEnableWholesaleModelFlag: false,
        batchSupplyWholesaleMinPrice: '',
        batchSupplyWholesaleMaxPrice: '',
        batchSetSupplyAllianceWholesalePriceVisable: false,
        // 是否只读，是的话就全部不能编辑
        isViewOnly: false
      }
    },
    // 初始化页面
    created() {
      this.uploadParams = {
        accessToken: getToken(),
        enterpriseId: this.getEnterpriseId(),
        goodsType: 30
      }
      const queryParams = this.getCurrentPage().query
      if (queryParams && queryParams.supplierId) {
        this.supplierId = queryParams.supplierId
      }
      if (queryParams && queryParams.currentPage) {
        this.searchListQuery.currentPage = queryParams.currentPage * 1
      }
      this.listBrand()
      this.initEnterpriseConfig()
      this.initDict()
      this.listGoodsCategory()
      this.listSupplyAllianceGoodsCategory()
      this.initGoodsList()
    },
    filters: {
      priceFilter(e) {
        return e.toFixed(2)
      }
    },
    mounted() {},
    methods: {
      listBrand() {
        listBrand(this.getEnterpriseId()).then(response => {
          if (response.isError) return
          this.listBrands = response.data
        })
      },
      initEnterpriseConfig() {
        getByEnterpriseId(this.getEnterpriseId()).then(response => {
          if (response.isError) return
          this.enterpriseConfig = response.data
        })
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.initGoodsList()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.initGoodsList()
      },
      // 勾选
      handleSelectionChange(val) {
        this.multipleSelection = val
        if (this.multipleSelection.length === this.goodsList.length) {
          this.allChecked = true
        } else {
          this.allChecked = false
        }
      },
      initDict() {
        getDictByGroupName('ProjectGoodsDTO').then(response => {
          this.dict = response.data
        })
      },
      setSearchListQuery() {
        // this.searchListQuery = {
        //   enterpriseId: this.getEnterpriseId(),
        //   supplierId: '',
        //   currentPage: this.searchListQuery.currentPage,
        //   size: this.searchListQuery.size,
        //   distributionType: this.searchListQuery.distributionType,
        //   supplierType: null,
        //   selectionGoodsType: this.searchListQuery.selectionGoodsType,
        //   searchKeyWordType: this.searchListQuery.searchKeyWordType,
        //   searchKeyWord: this.searchListQuery.searchKeyWord,
        //   goodsStatus: this.searchListQuery.goodsStatus,
        //   supplyAllianceStatusList: this.searchListQuery.supplyAllianceStatusList,
        //   supplyAllianceSellPriceType: this.searchListQuery.supplyAllianceSellPriceType
        // }
        this.searchListQuery.enterpriseId = this.getEnterpriseId()
        this.searchListQuery['goodsSourceList'] = '0,1'
        if (this.categoryIds != null) {
          this.searchListQuery['categoryId'] = this.categoryIds[this.categoryIds.length - 1]
        }
      },
      initGoodsList() {
        this.setSearchListQuery()
        this.listLoading = true
        pagingSupplyAllianceGoodsList(this.searchListQuery).then((response) => {
          if (response.isError) return
          this.listLoading = false
          this.total = response.total
          this.goodsList = response.records
        })
      },
      // 获取企业商品类目
      listGoodsCategory() {
        const enterpriseId = this.getEnterpriseId()
        listGoodsCategory(enterpriseId).then(response => {
          this.categoryData = response.data
        })
      },
      // 获取供货联盟商品类目
      listSupplyAllianceGoodsCategory() {
        getProjectCategoryTree().then(response => {
          this.supplyAllianceCategoryData = response.data
        })
      },
      // 未提交、已提交
      isSubmitAction(data) {
        this.searchListQuery.searchKeyWord = ''
        this.searchListQuery.searchKeyWordType = '1'
        this.categoryIds = []
        this.searchListQuery.supplyAllianceSellPriceType = ''

        if (data === '1') {
          this.searchListQuery.supplyAllianceStatusList = '1,2'
        } else {
          this.searchListQuery.supplyAllianceStatusList = '0'
        }
        this.handleSearch()
      },
      // 批量加入/移除供货联盟
      batchAddSupplyAlliance() {
        if (this.multipleSelection.length === 0) {
          this.msgError('请选择需要批量操作的数据')
          return
        }
        var selectGoodsIds = []
        const selections = this.multipleSelection
        if (selections !== undefined && selections.length > 0) {
          selections.forEach(goods => {
            selectGoodsIds.push(goods.goodsId)
          })
        } else {
          this.msgError('请勾选商品')
          return
        }
        var msgTips = '所选商品确认要批量加入供货联盟? '
        var operationType = 1
        if (this.isSubmitClick === '1') {
          operationType = 2
          msgTips = '商品移出供货联盟，其他企业将无法销售该商品，确认要移出? '
        }
        this.$confirm(msgTips, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          operationSupplyAllianceGoods(selectGoodsIds.join(','), operationType).then(response => {
            if (response.isError) return
            this.msgSuccess('批量操作成功')
            this.initGoodsList()
          })
        })
      },
      handleSearch() {
        this.searchListQuery.currentPage = 1
        this.initGoodsList()
      },
      resetSearch() {
        this.categoryIds = []
        this.searchListQuery = {
          enterpriseId: this.getEnterpriseId(),
          currentPage: 1,
          size: 10,
          goodsSourceList: '0,1',
          searchKeyword: '',
          searchKeyWordType: '1',
          supplyAllianceStatusList: this.searchListQuery.supplyAllianceStatusList,
          supplyAllianceSellPriceType: ''
        }
        this.initGoodsList()
      },
      // 上架
      handleUp(row) {
        if (row.goodsStatus === 0) {
          this.msgError('商品已下架，供货联盟不能上架')
          return
        }
        var selectGoodsIds = []
        selectGoodsIds.push(row.goodsId)
        operationSupplyAllianceGoods(selectGoodsIds.join(','), 3).then(response => {
          if (response.isError) return
          this.msgSuccess('上架成功')
          this.initGoodsList()
        })
      },
      // 下架
      handleDown(row) {
        var selectGoodsIds = []
        selectGoodsIds.push(row.goodsId)
        operationSupplyAllianceGoods(selectGoodsIds.join(','), 4).then(response => {
          if (response.isError) return
          this.msgSuccess('下架成功')
          this.initGoodsList()
        })
      },
      // 设置参数
      settingData(row) {
        // if (row.supplyAllianceStatus === 1 && row.goodsSource === 0) {
        //   this.msgError('商品已在供货联盟上架，设置参数前请先下架商品!')
        //   return
        // }
        this.getSupplyAllianceGoodsInfo(row.goodsId)
      },
      // 加入供货联盟
      addSupplyAlliance(row) {
        var selectGoodsIds = []
        selectGoodsIds.push(row.goodsId)
        operationSupplyAllianceGoods(selectGoodsIds.join(','), 1).then(response => {
          if (response.isError) return
          this.msgSuccess('加入供货联盟成功')
          this.initGoodsList()
        })
      },
      // 移除供货联盟
      removeSupplyAlliance(row) {
        this.$confirm('商品移出供货联盟，其他企业将无法销售该商品，确认要移出? ', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var selectGoodsIds = []
          selectGoodsIds.push(row.goodsId)
          operationSupplyAllianceGoods(selectGoodsIds.join(','), 2).then(response => {
            if (response.isError) return
            this.msgSuccess('移除供货联盟成功')
            this.initGoodsList()
          })
        })
      },
      // 获取商品数据
      getSupplyAllianceGoodsInfo(goodsId) {
        var that = this
        that.projectCategoryIds = []
        that.settingDataVisible = true
        that.isViewOnly = false
        getSupplyAllianceGoodsInfo(goodsId).then(response => {
          Object.assign(that.goodsEntity, response.data)
          that.goodsEntity.supplyAllianceSellPriceType = that.goodsEntity.supplyAllianceSellPriceType + ''
          that.supplyIsEnableWholesaleModelFlag = false
          if (that.goodsEntity.supplyAllianceIsEnableWholesaleModel === 1) {
            that.supplyIsEnableWholesaleModelFlag = true
          }
          var supplyAllianceWholesalePriceType = '1'
          if (that.goodsEntity.supplyAllianceWholesalePriceType) {
            supplyAllianceWholesalePriceType = that.goodsEntity.supplyAllianceWholesalePriceType.toString()
          }
          that.goodsEntity.supplyAllianceWholesalePriceType = supplyAllianceWholesalePriceType
          if (that.goodsEntity.supplyAllianceOneCategoryId) {
            that.projectCategoryIds.push(that.goodsEntity.supplyAllianceOneCategoryId)
          }
          if (that.goodsEntity.supplyAllianceTwoCategoryId) {
            that.projectCategoryIds.push(that.goodsEntity.supplyAllianceTwoCategoryId)
          }
          if (that.goodsEntity.supplyAllianceThreeCategoryId) {
            that.projectCategoryIds.push(that.goodsEntity.supplyAllianceThreeCategoryId)
          }
          that.goodsEntity.projectCategoryIds = that.projectCategoryIds
          if (that.goodsEntity.supplyAllianceStatus === 1) {
            that.isViewOnly = true
          }
          this.changeSellPriceType(that.goodsEntity.supplyAllianceSellPriceType + '')
          this.changeWholesalePriceType(that.goodsEntity.supplyAllianceWholesalePriceType + '')
        })
      },
      saveEntity() {
        // 判断是否有重新选择
        const projectCategoryIds = this.goodsEntity.projectCategoryIds
        if (projectCategoryIds) {
          if (projectCategoryIds.length === 1) {
            this.goodsEntity.supplyAllianceOneCategoryId = projectCategoryIds[0]
          }
          if (projectCategoryIds.length === 2) {
            this.goodsEntity.supplyAllianceOneCategoryId = projectCategoryIds[0]
            this.goodsEntity.supplyAllianceTwoCategoryId = projectCategoryIds[1]
          }
          if (projectCategoryIds.length === 3) {
            this.goodsEntity.supplyAllianceOneCategoryId = projectCategoryIds[0]
            this.goodsEntity.supplyAllianceTwoCategoryId = projectCategoryIds[1]
            this.goodsEntity.supplyAllianceThreeCategoryId = projectCategoryIds[2]
          }
        }
        this.goodsEntity.supplyAllianceUpdateType = '2'
        this.goodsEntity.enterpriseId = this.getEnterpriseId()
        this.$refs['goodsEntityForm'].validate((valid) => {
          if (valid) {
            const supplyAllianceSellPriceType = this.goodsEntity.supplyAllianceSellPriceType
            const supplyWholesalePriceType = this.goodsEntity.supplyAllianceWholesalePriceType

            if (this.goodsEntity.skuFlag === 1) {
              for (var i = 0; i < this.goodsEntity.skuList.length; i++) {
                var data = this.goodsEntity.skuList[i]
                const supplyPrice = data.supplyAlliancePrice
                const minSPrice = data.supplyAllianceSellMinPrice
                const maxSPrice = data.supplyAllianceSellMaxPrice
                // 供应价
                var supplyPriceNullFlag = Number.isNaN(parseFloat(supplyPrice))
                if (supplyPriceNullFlag) {
                  this.msgError('请填写sku:' + data.skuDetail + ',供应价')
                  return
                }
                const isValidSuccess = this.checkPrice('零售价', data.skuDetail, supplyAllianceSellPriceType,
                  supplyPrice, minSPrice,
                  maxSPrice)
                if (!isValidSuccess) {
                  return
                }
                // 启用批发价
                if (this.supplyIsEnableWholesaleModelFlag) {
                  const minPPrice = data.supplyAllianceMinWholesalePrice
                  const maxPPrice = data.supplyAllianceMaxWholesalePrice
                  const isValidSuccess = this.checkPrice('批发价', data.skuDetail, supplyWholesalePriceType,
                    supplyPrice, minPPrice,
                    maxPPrice)
                  if (!isValidSuccess) {
                    return
                  }
                }
              }
            } else {
              const supplyAlliancePrice = this.goodsEntity.supplyAlliancePrice
              const minSPrice = this.goodsEntity.supplyAllianceSellMinPrice
              const maxSPrice = this.goodsEntity.supplyAllianceSellMaxPrice
              const isValidSuccess = this.checkPrice('零售价', null, supplyAllianceSellPriceType, supplyAlliancePrice,
                minSPrice, maxSPrice)
              if (!isValidSuccess) {
                return
              }
              // 启用批发价模式
              if (this.supplyIsEnableWholesaleModelFlag) {
                const minPPrice = this.goodsEntity.supplyAllianceMinWholesalePrice
                const maxPPrice = this.goodsEntity.supplyAllianceMaxWholesalePrice
                const isValidSuccess = this.checkPrice('批发价', null, supplyWholesalePriceType, supplyAlliancePrice,
                  minPPrice, maxPPrice)
                if (!isValidSuccess) {
                  return
                }
              }
            }
            this.goodsEntity.supplyAllianceIsEnableWholesaleModel = this.supplyIsEnableWholesaleModelFlag ? 1 : 0
            saveSupplyAllianceGoodsData(this.goodsEntity).then(response => {
              if (response.isError) return
              this.msgSuccess('保存成功')
              this.settingDataVisible = false
              this.initGoodsList()
            })
          }
        })
      },
      checkPrice(label, skuDetail, priceType, supplyPrice, minPrice, maxPrice) {
        var minPriceNullFlag = Number.isNaN(parseFloat(minPrice))
        var maxPriceNullFlag = Number.isNaN(parseFloat(maxPrice))
        var labelTips = ''
        if (priceType === '1') {
          labelTips = '范围最小金额'
        } else if (priceType === '2') {
          labelTips = '限定金额'
        } else if (priceType === '3') {
          labelTips = '建议金额'
        }
        if (minPriceNullFlag) {
          if (skuDetail) {
            this.msgError('请填写sku[' + skuDetail + ']的' + label + '最小范围!')
          } else {
            this.msgError('请填写' + label + labelTips + '!')
          }
          return false
        }
        var minFloatPrice = parseFloat(minPrice)
        if (priceType === '1') {
          if (maxPriceNullFlag) {
            if (skuDetail) {
              this.msgError('请填写sku[' + skuDetail + ']的' + label + '最大范围!')
            } else {
              this.msgError('请填写' + label + '最大范围!')
            }
            return false
          }
          var maxFloatPrice = parseFloat(maxPrice)
          if (minFloatPrice <= 0) {
            if (skuDetail) {
              this.msgError('sku[' + skuDetail + ']的' + label + '最小值不能小于0!')
            } else {
              this.msgError(label + '最小值不能小于0!')
            }
            return false
          }
          if (maxFloatPrice <= 0) {
            if (skuDetail) {
              this.msgError('sku[' + skuDetail + ']的' + label + '最大值不能小于0!')
            } else {
              this.msgError(label + '最大值不能小于0!')
            }
            return false
          }
          if (maxFloatPrice < minFloatPrice) {
            if (skuDetail) {
              this.msgError('sku[' + skuDetail + ']的' + label + '最大值不能小于最小值!')
            } else {
              this.msgError(label + '最大值不能小于最小值!')
            }
            return false
          }
        }
        // 不等于不限定，都要校验最小值要有值
        if (priceType !== '3') {
          if (minFloatPrice < parseFloat(supplyPrice)) {
            if (skuDetail) {
              this.msgError('sku[' + skuDetail + ']的' + label + '不能小于供应价!')
            } else {
              this.msgError(label + '不能小于供应价!')
            }
            return false
          }
        }
        return true
      },
      closeDialog() {
        const originData = this.$options.data()
        this.goodsEntity = originData.goodsEntity
        this.batchSupplyAlliancePrice = ''
        this.batchSupplyAllianceSellMaxPrice = ''
        this.batchSupplyAllianceSellMinPrice = ''
        this.supplyIsEnableWholesaleModelFlag = false
        this.batchSupplyWholesaleMinPrice = ''
        this.batchSupplyWholesaleMaxPrice = ''
        this.$refs['goodsEntityForm'].resetFields()
        this.settingDataVisible = false
      },
      changeSellPriceType(type) {
        if (type === '1') {
          this.selectSellPriceTypeTitle = '零售价范围：'
        } else if (type === '2') {
          this.selectSellPriceTypeTitle = '限定零售价：'
        } else if (type === '3') {
          this.selectSellPriceTypeTitle = '建议零售价：'
        }
      },
      changeWholesalePriceType(type) {
        if (type === '1') {
          this.selectWholesalePriceTypeTitle = '批发价范围：'
        } else if (type === '2') {
          this.selectWholesalePriceTypeTitle = '限定批发价：'
        } else if (type === '3') {
          this.selectWholesalePriceTypeTitle = '建议批发价：'
        }
      },
      batchSetPrice(type) {
        if (this.goodsEntity.skuList !== undefined && this.goodsEntity.skuList !== null && this.goodsEntity.skuList
          .length > 0) {
          if (type === 1) {
            if (this.batchSupplyAlliancePrice === '' || this.batchSupplyAlliancePrice === undefined) {
              this.msgError('请先填写要批量设置的供货价')
              return
            }
            this.goodsEntity.skuList.forEach(item => {
              if (item.supplyAlliancePrice === undefined) {
                this.$set(item, 'supplyAlliancePrice', this.batchSupplyAlliancePrice)
              } else {
                item.supplyAlliancePrice = this.batchSupplyAlliancePrice
              }
            })
            this.batchSetSupplyAlliancePriceVisable = false
          }
          if (type === 2) {
            if (this.goodsEntity.supplyAllianceSellPriceType === '1') {
              if (this.batchSupplyAllianceSellMinPrice === '' || this.batchSupplyAllianceSellMinPrice === undefined) {
                this.msgError('请先填写要批量设置的零售价区间最小值')
                return
              }
              if (this.batchSupplyAllianceSellMaxPrice === '' || this.batchSupplyAllianceSellMaxPrice === undefined) {
                this.msgError('请先填写要批量设置的零售价区间最大值')
                return
              }
              if (parseFloat(this.batchSupplyAllianceSellMinPrice) > parseFloat(this.batchSupplyAllianceSellMaxPrice)) {
                this.msgError('区间价格最小值不能大于最大值')
                return
              }
            } else {
              if (this.batchSupplyAllianceSellMinPrice === '' || this.batchSupplyAllianceSellMinPrice === undefined) {
                this.msgError('请先填写要批量设置的零售价')
                return
              }
            }

            this.goodsEntity.skuList.forEach(item => {
              if (item.supplyAllianceSellMinPrice === undefined) {
                this.$set(item, 'supplyAllianceSellMinPrice', this.batchSupplyAllianceSellMinPrice)
              } else {
                item.supplyAllianceSellMinPrice = this.batchSupplyAllianceSellMinPrice
              }
            })

            this.goodsEntity.skuList.forEach(item => {
              if (item.supplyAllianceSellMaxPrice === undefined) {
                this.$set(item, 'supplyAllianceSellMaxPrice', this.batchSupplyAllianceSellMaxPrice)
              } else {
                item.supplyAllianceSellMaxPrice = this.batchSupplyAllianceSellMaxPrice
              }
            })
            this.batchSetSupplyAllianceSellPriceVisable = false
          }

          if (type === 3) {
            var nullFlag = Number.isNaN(parseFloat(this.batchSupplyWholesaleMinPrice))
            if (this.goodsEntity.supplyAllianceWholesalePriceType === '1') {
              if (nullFlag) {
                this.msgError('请先填写要批量设置的批发价区间最小值')
                return
              }
              nullFlag = Number.isNaN(parseFloat(this.batchSupplyWholesaleMaxPrice))
              if (nullFlag) {
                this.msgError('请先填写要批量设置的批发价区间最大值')
                return
              }
              if (parseFloat(this.batchSupplyWholesaleMinPrice) > parseFloat(this.batchSupplyWholesaleMaxPrice)) {
                this.msgError('区间价格最小值不能大于最大值')
                return
              }
            } else {
              if (nullFlag) {
                this.msgError('请先填写要批量设置的批发价')
                return
              }
            }

            this.goodsEntity.skuList.forEach(item => {
              this.$set(item, 'supplyAllianceMinWholesalePrice', this.batchSupplyWholesaleMinPrice)
              if (this.goodsEntity.supplyAllianceWholesalePriceType === '1') {
                this.$set(item, 'supplyAllianceMaxWholesalePrice', this.batchSupplyWholesaleMaxPrice)
              } else {
                this.$set(item, 'supplyAllianceMaxWholesalePrice', this.batchSupplyWholesaleMinPrice)
              }
            })
            this.batchSetSupplyAllianceWholesalePriceVisable = false
          }
        } else {
          this.msgError('没有可操作的sku项')
        }
      },
      showBatchSetSupplyAlliancePrice(type) {
        if (type === 1) {
          this.batchSetSupplyAlliancePriceVisable = true
        }

        if (type === 2) {
          this.batchSetSupplyAllianceSellPriceVisable = true
        }

        if (type === 3) {
          this.batchSetSupplyAllianceWholesalePriceVisable = true
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .btn-search {
    height: 60px;
    display: flex;
    align-items: center;
  }

  .v-align-h {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
  }

  .user-avatar {
    width: 65px;
    height: 65px;
    display: block;
    padding: 1px;
    // border: #efefef 1px solid;
  }

  .goods-title {
    color: #155bd4;
    line-height: 1.2;
  }

  .gray-bar {
    background: #e4e4e4;
    padding: 20px;
    margin-bottom: 20px;
    width: 80%;
  }

  .tips {
    color: gray;
    font-size: 12px;
    line-height: 1.2;
    padding-top: 5px;
  }

  .special-input {
    /deep/ .el-input {
      width: 150px;
    }
  }

  // 2行文字展示
  .line-2 {
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
  }

  .anchor-tag {
    color: #008425;
    background-color: #E3FFEB;
    border-color: #0084251a;
  }

  .w-195 {
    width: 245px;
  }

  .w-430 {
    width: 560px;
  }

  .categoryWidth {
    /deep/.el-input {
      width: 99%;
    }
  }
</style>
